import React, { useState, useEffect } from "react";
// 引入页面样式文件
import "./CollectHouse.css";
// 引入面包屑导航自定义封装组件
import BreadCumbComp from "../../component/breadshoucang/BreadCumbComp";
import { getFavorites, removeFavorite } from "../../utils/http";
import { Empty, Spin, message } from "antd";
import CollectTable from "./collectTable";

interface CollectItem {
  key: string;
  src: string;
  title: string;
  description: string;
  price: string;
  tags: string[];
  id: any;
}

interface CollectTableProps {
  data: CollectItem[];
  columns?: any[];
}

const CollectHouse = () => {
  const [collectData, setCollectData] = useState<CollectItem[]>([]);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    fetchCollectData();
  }, []);

  // 删除收藏
  const deleteCollect = async (id: any) => {
    try {
      const res = await removeFavorite(id);
      if (res.status === 200) {
        message.success('取消收藏成功');
        fetchCollectData();
      }
    } catch (err) {
      console.error('取消收藏失败:', err);
      message.error('取消收藏失败');
    }
  };

  const fetchCollectData = async () => {
    setLoading(true);
    setError(null);
    try {
      const response = await getFavorites();
      console.log('收藏列表原始数据:', response);
      
      // 处理返回的数据，确保数据格式正确
      let processedData: CollectItem[] = [];
      
      // 更健壮的数据结构处理
      if (response && response.code === 200) {
        // 处理各种可能的数据结构
        const dataArray = Array.isArray(response.body) ? response.body : 
                         Array.isArray(response.data) ? response.data : [];
        
        processedData = dataArray.map((item: any, index: number) => {
          // 深入挖掘可能的数据嵌套结构
          const houseData = item.body || item.list || item.data || item;
          
          // 处理tags字段 - 支持多种可能的格式
          let tagsArray: string[] = ['近地铁'];
          if (houseData.tags) {
            if (Array.isArray(houseData.tags)) {
              tagsArray = houseData.tags;
            } else if (typeof houseData.tags === 'string') {
              // 尝试分割字符串标签
              if (houseData.tags.includes('、') || houseData.tags.includes('，') || houseData.tags.includes(',')) {
                tagsArray = houseData.tags.split(/[、，,]/).filter((t: string) => t.trim());
              } else {
                tagsArray = [houseData.tags];
              }
            }
          }
          
          // 处理图片路径 - 支持更多可能的字段名
          let src = houseData.houseImg || houseData.imgSrc || houseData.image || houseData.img || '';
          if (typeof src === 'string') {
            if (src && (src.startsWith('/neImg/') || src.startsWith('/'))) {
              src = `http://localhost:8080${src}`;
            } else if (!src) {
              // 如果没有图片，使用默认图片
              src = '/1.jpg';
            }
          }
          
          // 尝试获取ID的各种可能字段
          const itemId = houseData.houseCode || item.id || houseData.id || houseData.houseId || index + 1;
          
          return {
            key: String(itemId),
            src: src,
            title: houseData.title || houseData.name || '房源信息',
            description: houseData.desc || houseData.description || houseData.title || '暂无描述',
            price: houseData.price ? `¥${houseData.price}.00` : '¥0.00',
            tags: tagsArray.length > 0 ? tagsArray : ['近地铁'],
            id: itemId
          };
        }).filter(item => item.id); // 只过滤ID为假值的项，允许0等有效值
      }
      
      console.log('处理后的收藏列表数据:', processedData);
      
      // 如果获取到了真实数据，使用真实数据；否则使用兜底数据
      if (processedData.length > 0) {
        setCollectData(processedData);
      } else {
        // 显示提示信息，说明没有收藏数据
        console.log('未获取到收藏数据');
        setCollectData([]);
      }
    } catch (err) {
      console.error('获取收藏列表失败:', err);
      setError('获取收藏列表失败');
      message.error('获取收藏列表失败');
      // 使用空数组而不是mock数据，这样用户就能看到真实的空状态
      setCollectData([]);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="collect-house-container">
      {/* 自定义面包屑导航 */}
      <BreadCumbComp />

      {loading ? (
        <div className="loading-container">
          <Spin size="large" tip="加载中..." />
        </div>
      ) : (
        /* 根据收藏房源数据进行条件渲染,有收藏数据时，将数据传递给收藏表格，无数据时，展示空状态 */
        collectData.length > 0 ? (
        <CollectTable 
          data={collectData} 
        />
      ) : (
          <div className="empty">
            <Empty description="暂无收藏房源" />
          </div>
        )
      )}
    </div>
  );
};
export default CollectHouse;
